@white:#dcd8c0;
@yellowWhite:#d4cfb5;
@yellow:#968f7a;
@darkYellow:#978f7a;
@gray:#46443d;
@darkGray:#403b38;
@dark:#333333;
@red:#d81e06;

body {
    padding: 0;
    margin: 0;
    position: relative;
}

.fade-enter-from,.fade-leave-to {
    opacity: 0;
}
.fade-enter-to,.fade-leave-from {
    opacity: 1;
}
.fade-enter-active,.fade-leave-active {
    transition: all 300ms ease-in-out;
}

.yorha-hover {
    position: absolute;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(51, 51, 51, 0.4);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: all 300ms ease-in-out;
    animation: hover-show 300ms 1;
}

@keyframes hover-show {
    0%{opacity: 0;}
    10%{opacity: 0.2;}
    100%{opacity: 1;}
}

@keyframes hover-fade {
    0%{opacity: 1;}
    10%{opacity: 0.8;}
    100%{opacity: 0;}
}

.yorha-warning-con {
    box-sizing: border-box;
    width: 300px;
    height: 70px;
    border: 3px solid @gray;
    background: @yellow;
    .title-box {
        width: 100%;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        &>img {
            width: 20px;
            height: 20px;
        }
        &>span {
            font-size: 20px;
        }
    }
    .contain-box {
        width: 100%;
        display: flex;
        justify-content: center;
        font-size: 10px;
        padding:0 5px 5px 5px;
        box-sizing: border-box;
        overflow: hidden;
    }
}



@keyframes yorha_loading {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.yorha-bunker-logo-con {
    width: 250px;
    height: 250px;
    position: relative;
    &>img {
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        position: absolute;
        &.inner {
            animation:yorha_bunker_logo_circle_inner 100s infinite linear;
        }
        &.outer {
            animation:yorha_bunker_logo_circle_outer 100s infinite linear;
        }
    }
}

@keyframes yorha_bunker_logo_circle_outer {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-360deg);
    }
}

@keyframes yorha_bunker_logo_circle_inner {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}